<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="选择工具" width="1200px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="8">
            <px-form-item label="工具借用单号">
              <px-input v-model="queryParams.toolBorrowCode" placeholder="请输入工具借用单号" clearable maxlength="50" @keyup.enter="queryTable">
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="8">
            <div class="equip-dialog-btn">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </div>
          </px-col>
        </px-row>
      </px-form>
      <px-table ref="tableRef" :data="tableData" class="equip-table" size="small" max-height="400" border @selection-change="selectChange">
        <px-table-column type="expand" width="40">
          <template #default="props">
            <div style="padding-left: 40px">
              <px-table :data="props.row.chooseToolBorrowDetailDTOList" border>
                <px-table-column
                  v-for="(item, index) in childTableColumns"
                  :key="index"
                  :label="item.label"
                  :min-width="item.minWidth"
                  :align="item.align"
                  :show-overflow-tooltip="item.showOverflowTooltip"
                  :fixed="item.fixed"
                >
                  <template #default="scope">
                    <px-tag
                      v-if="item.tag"
                      effect="plain"
                      :style="{
                        color: 'rgba(0, 0, 0, 0.8)',
                        border: `1px solid ${scope.row.revertStatus === 1 ? '#4CCBA1' : '#F7B648'}`,
                        backgroundColor: `${scope.row.revertStatus === 1 ? '#E8F8F3' : '#FEF5E6'}`
                      }"
                    >
                      {{ scope.row.revertStatusDesc }}
                    </px-tag>
                    <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
                  </template>
                </px-table-column>
              </px-table>
            </div>
          </template>
        </px-table-column>
        <px-table-column type="selection" width="60" align="center" />
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-pagination"
        :total="total"
        @pagination="queryTable"
      />
      <div style="margin-top: 16px; text-align: right">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="handleSubmit">确认</px-button>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { queryToolBorrow } from "@/api/equip/maintain";
import { getEmployeeIdAndName } from "@/utils/pengxi";
import { computed, reactive, toRefs } from "vue";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog", "addEquipDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "className"]);
const visible = computed(() => props.visible);
// 页面本身的值
const state = reactive<any>({
  tableRef: null,
  queryParams: {
    toolNameOrCode: "",
    revertStatus: 2,
    pageNum: 1,
    pageSize: 10
  },
  tableColumns: [
    { prop: "toolBorrowCode", label: "领用工单号", minWidth: "180", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "借用人科室", minWidth: "140", showOverflowTooltip: true },
    { prop: "toolBorrowerName", label: "领用人", minWidth: "140", showOverflowTooltip: true },
    { prop: "toolBorrowDate", label: "领用时间", minWidth: "160", showOverflowTooltip: true }
  ],
  childTableColumns: [
    { prop: "toolCode", label: "工具编码", minWidth: "160", showOverflowTooltip: true },
    { prop: "toolName", label: "工具名称", minWidth: "160", showOverflowTooltip: true },
    { prop: "toolCategoryDesc", label: "工具分类", minWidth: "160", showOverflowTooltip: true },
    { prop: "toolUnitDesc", label: "单位", minWidth: "160", showOverflowTooltip: true },
    { prop: "revertStatus", label: "领取状态", minWidth: "140", showOverflowTooltip: true, tag: true },
    { prop: "toolReverterName", label: "归还人", minWidth: "140", showOverflowTooltip: true },
    { prop: "toolRevertDate", label: "归还时间", minWidth: "160", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  selectRows: [],
  custodianList: []
});
const { tableRef, queryParams, tableColumns, childTableColumns, tableData, total, selectRows, custodianList } = toRefs(state);
// 查询工具列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await queryToolBorrow(params);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和工具列表
const resetTable = async () => {
  queryParams.value = {
    toolNameOrCode: "",
    revertStatus: 2,
    className: props.className,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 表格多选框选中
const selectChange = () => {
  selectRows.value = tableRef.value.getSelectionRows();
};
// 确定选择备件
const handleSubmit = () => {
  emits("closeDialog");
  emits("addEquipDialog", selectRows.value);
};

// 打开弹窗
const openDialog = async () => {
  custodianList.value = await getEmployeeIdAndName();
  queryParams.value = {
    toolNameOrCode: "",
    revertStatus: 2,
    className: props.className,
    pageNum: 1,
    pageSize: 10
  };
  queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
.equip-dialog-wrap {
  .equip-dialog-content {
    :deep(.px-form) {
      width: 100%;

      .px-form-item {
        width: 100%;
        margin-right: 0;

        .px-input {
          width: 100%;
        }

        .px-select {
          width: 100%;
        }

        .px-select-v2 {
          width: 100%;
        }
      }
    }

    .equip-dialog-btn {
      :deep(.px-button + .px-button) {
        margin-left: 8px;
      }
    }

    .equip-table {
      --px-table-border-color: #dfdfdf;

      :deep(.px-table__header) {
        thead {
          tr {
            background-color: #e7eefb !important;

            th {
              font-size: 13px;
              font-weight: bold;
              color: #000;
              background-color: #e7eefb !important;
            }
          }
        }
      }
    }

    :deep(.px-pagination) {
      right: 32px;
    }
  }
}
</style>
